<template>
 <div class="app-container">
            <div class="cbox">
              <el-form class="form" ref="flt" :rules="rules" label-width="12rem" size="mini">
                <el-row :gutter="15" class="row">
                  <el-col :span="6">
                  <el-form-item label="区域中心名称：" prop="dptName">
                    <el-input placeholder="请输入区域中心名称" v-model="from.dptName" style="width: 100%" clearable></el-input>
                  </el-form-item>
                </el-col>
                  <el-col :span="6">
                    <el-form-item label="区域中心代码：">
                      <el-input   placeholder="请输入区域中心代码" v-model="from.usrCode" style="width: 100%" clearable></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="2">
                    <el-form-item label-width="10px">
                      <el-button @click="searchType" type="primary">查询</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <el-row :gutter="10" class="btn-area">
                <el-col :span="24">
                  <el-button size="mini" type="success" plain @click="add">新增</el-button>
                  <el-button size="mini" type="primary" plain @click="del('diong')">编辑</el-button>
                  <el-button size="mini" type="danger" plain @click="examine">删除</el-button>
                  <el-button plain size="mini" type="primary" icon="document" disabled @click="handleDownload" :loading="downloadLoading">导出</el-button>
                </el-col>
            </el-row>
            <div class="table" ref="topType">
              <div class="inner" ref="inner">
                      <!-- <div class="btn-area" ref="btnArea">
                        <el-button plain size="mini" type="success" @click="add">新增</el-button>
                        <el-button plain size="mini" type="primary" @click="del('diong')">编辑</el-button>
                        <el-button plain size="mini" type="danger" @click="examine">删除</el-button>
                        <el-button plain size="mini" type="primary" icon="document" disabled @click="handleDownload" :loading="downloadLoading">导出</el-button>
                      </div> -->
                    <el-table
                      :data="DetailedData"
                      border
                      :height="maxHeight"
                       row-key="dptId"
                       default-expand-all
                       highlight-current-row
                      :tree-props="{children: 'sysDepartmentChildren'}"
                       @row-dblclick='rowdbClick'
                      @row-click="rowClick">
                      <el-table-column align="center" type="index" show-overflow-tooltip  label="序号" width="50"></el-table-column>
                      <el-table-column align="center" prop="dptCode"  sortable show-overflow-tooltip  label="区域中心代码"></el-table-column>
                      <el-table-column align="center" prop="dptName"  sortable show-overflow-tooltip label="区域中心名称"></el-table-column>
                      <el-table-column align="center" prop="dptPredptName"  sortable show-overflow-tooltip label="上级机构"></el-table-column>
                      <el-table-column align="center" prop="userNum"  sortable show-overflow-tooltip label="用户人数"></el-table-column>
                      <el-table-column align="center" prop="haveUser" show-overflow-tooltip label="查看用户">
                        <template slot-scope="scope">
                          <div  v-if="scope.row.haveUser == 'Y'" style="text-align:center">
                            <el-button  plain size="mini" type="primary" @click="CK(scope.row)">查看</el-button>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
            </div>
        <!-- 分页 -->
        <el-pagination
          class="pagination"
          small
          background
          ref="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Pagination.currentPage"
          :page-sizes="Pagination.pageSizeList"
          :page-size="Pagination.pageSize"
          :layout="Pagination.layout"
          :total="Pagination.total"
        ></el-pagination>
        <!-- 弹出框 新增 编辑 -->
        <el-dialog
        v-el-drag-dialog
          width="40%"
          :title='addText'
          :visible.sync="addShowA"
          v-if="addShowA"
          :close-on-click-modal="false">
              <el-form  label-width="14rem" :model="xzData"  ref="xzData"  size="mini" :rules="addRules">
                    <el-row >
                      <el-col :span="12">
                        <el-form-item label="区域/派车中心：" prop="dptType">
                          <el-radio-group v-model="xzData.dptType" :disabled='disabled'>
                            <el-radio label="P" checked>区域中心</el-radio>
                            <el-radio label="Q">区域</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="dptSeq" label="区域中心序号：">
                          <el-input maxlength="32" :disabled='disabled' v-model="xzData.dptSeq" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                        <el-form-item prop="dptCode" label="区域中心代码：">
                          <el-input maxlength="32" :disabled='disabledA' v-model="xzData.dptCode" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="dptName" label="区域中心名称：">
                          <el-input maxlength="32"  :disabled='disabled' v-model="xzData.dptName" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="上级机构：" prop="dptPredptName" >
                          <el-popover
                            placement="bottom"
                            width="400"
                            trigger="click"
                            v-model="showpop"
                            :disabled='disabled'
                            >
                              <el-tree
                              :disabled='disabled'
                              :data="organization"
                              :props="defaultProps"
                              node-key="dptPredptId"
                              default-expand-all
                              ref="tree"
                              @node-click="chose"
                              >
                              </el-tree>
                            <el-input  slot="reference" :disabled='disabled' placeholder="点击选择上级机构" v-model="xzData.dptPredptName"></el-input>
                          </el-popover>
                        </el-form-item>
                      </el-col>
                      </el-row>
              </el-form>
                  <div slot="footer" class="dialog-footer">
                      <el-button size="mini" type="primary" v-if="see" @click="saveEditor('xzData')">保存</el-button>
                    <el-button size="mini"  @click="close">关闭</el-button>
               </div>
        </el-dialog>
        <!-- 点击查看 弹出框 -->
        <el-dialog
          :title='addText'
          :visible.sync="addShowB"
          v-if="addShowB"
          :close-on-click-modal="false">
          <el-table
              :data="itemData"
              border
              :height="500"
              :header-cell-style="{ textAlign: 'center' }"
              highlight-current-row
              @row-dblclick='rowdbClickA'
              @row-click="rowClickA">
              <el-table-column type="index" show-overflow-tooltip  label="序号" width="50"></el-table-column>
              <el-table-column prop="usrCode" show-overflow-tooltip label="账户代码"></el-table-column>
              <el-table-column prop="usrName" show-overflow-tooltip label="账户名称"></el-table-column>
              <el-table-column prop="usrCellphone" show-overflow-tooltip label="联系电话"></el-table-column>
              <el-table-column prop="usrEmail" show-overflow-tooltip label="邮箱"></el-table-column>
              <el-table-column prop="roleName" show-overflow-tooltip label="角色"></el-table-column>
              <el-table-column prop="usrStatusName" show-overflow-tooltip label="状态"></el-table-column>
            </el-table>
                  <div slot="footer" class="dialog-footer">
                    <el-button size="mini"  @click="close">关闭</el-button>
                  </div>
        </el-dialog>
  </div>
</template>

<script>
import {
  regionList,
  regionListA,
  addRegion,
  // addRegionXL,
  delRegion,
  eitdRegion,
  RegionSj
} from '@/request/api'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'

export default {
  mixins: [resizeMixin,paginationMixin],
  data(){
    return{
      disabledA:false,
      disabled:false,
      showpop: false,
      from:{
        usrCode:'',
        dptName:''
      },
      maxHeight:-1,
      listData:[],
      listDataA:[], //上级机构,
      DataList:'',
      diong:'E',
      addText:'',
      addShowA:false, // 新增 编辑
      addShowB:false, // 查看区域中心所有用户弹出框
      see:true, //保存按钮
      downloadLoading:false,//导出
      DetailedData:[], //主列表的数据
      xzData:[],// 传给新增 编辑弹出框的数据
      itemData:[], //查看查看区域中心所有用户 数据
      PageIndexs:'',
      PageSizes:'',
      data2: [],
      //表单验证 新增 编辑
      addRules:{
        dptType:[
          { required: true, message: '请填写区域/派车中心', trigger:'blur'}
        ],
        dptSeq:[
          { required: true, message: '请填写区域中心序号', trigger:'blur'}
        ],
        dptCode:[
          { required: true, message: '请填写区域中心代码', trigger:'change'}
        ],
        dptName:[
          { required: true, message: '请填写区域中心名称', trigger:'change'}
        ],
        dptPredptName:[
          { required: true, message: '请选择上级机构', trigger:'change'}
        ]
      },
      defaultProps: {
        children: 'sysDepartmentChildren',
        label: 'dptName'
      },
    }
  },
  created(){
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  mounted(){
    // this.dataitemList()
    this.refreshList()
    this.getzuzhi()
  },
  computed: {

    organization() {
      return this.data2.map( item => {
        item['dptNameA']  = item.dptName
        return item
      })
    }
  },
  methods:{
    chose(data) {
      // 上级机构
      this.xzData.dptPredptName = data.dptName

      this.xzData.dptPredptId = data.dptId

      this.showpop = false
    },
    //上级机构下拉框
    getzuzhi() {
      RegionSj({dptType:'Q'}).then(res=>{
        this.data2 = res.data.FTKJWLHYPT
      })
    },
    // 请求列表
    // dataitemList(){
    //   let PageSizes=this.Pagination.pageSize.toString()
    //   let PageIndexs=this.Pagination.currentPage.toString()
    //   regionList({dptCode:'',dptName:'',PageSizes:PageSizes,PageIndexs:PageIndexs,}).then(res=>{
    //     this.Pagination.total=res.data.total.FTKJWLHYPT
    //     this.DetailedData = res.data.FTKJWLHYPT
    //   })
    // },
    //获取列表数据
    getList(currentPage, pageSize, updateTotal) {
      this.currentData = {}
      regionList({
        dptCode:this.from.usrCode,
        dptName:this.from.dptName,
        PageIndexs:this.Pagination.currentPage.toString(),
        PageSizes:this.Pagination.pageSize.toString()
      }).then(response => {
        this.DetailedData = response.data.FTKJWLHYPT
        updateTotal(Number(response.data.total.FTKJWLHYPT))
      })
    },

    // 点击搜索
    searchType(){
      this.refreshList()
      // this.searchList()
      // let PageSizes=this.Pagination.pageSize.toString()
      // let PageIndexs=this.Pagination.currentPage.toString()
      // regionList({dptCode:this.from.usrCode, dptName:this.from.dptName, PageSizes:PageSizes,PageIndexs:PageIndexs,}).then(res=>{
      //   this.Pagination.total=res.data.total.FTKJWLHYPT
      //   this.DetailedData = res.data.FTKJWLHYPT
      // })
    },
    //新增
    add(){
      this.xzData = {
        dptPredptName:this.data2[0].dptName,
        dptPredptId:this.data2[0].dptId,
        dptCode:'',
        dptName:'',
        // dptRemark:'',
        dptSeq:'0',
        dptType:'P',
        // dptDepId:'',
      },
      this.addText='新增'
      this.diong=''
      this.addShowA = true
      this.see = true
      this.disabled=false
      this.disabledA=false
    },
    //编辑
    del(){
      if(Object.keys(this.DataList).length){
        this.xzData = this.DataList
        this.addText='编辑'
        this.diong='E'
        this.addShowA=true
        this.see = true
        this.disabled=false
        this.disabledA=true
      }else{
        this.$alert('请选择需要编辑的数据', '提示', {
          confirmButtonText: '确定'
        })
        return false
      }
    },
    //新增 编辑  点击保存
    saveEditor(xzData){
      this.$refs[xzData].validate((valid) => {
        if (valid) {
          if (this.diong ==='E') {
            delRegion(this.xzData).then(res=>{

              if(res.success !== '1'){
                this.$message({
                  type: 'success',
                  message: '编辑失败'
                })
                return
              }else{
                this.xzData = []
                this.$message({
                  type: 'success',
                  message: '编辑成功'
                })
                // this.dataitemList()
                this.refreshList()
                this.close()
              }

            })
          }else{
            addRegion(this.xzData).then( res =>{
              if(res.success !=='1'){
                this.$message({
                  type: 'success',
                  message: '添加失败'
                })
                return
              }else{
                this.$message({
                  type: 'success',
                  message: '添加成功'
                })
                this.close()
                // this.dataitemList()
                this.refreshList()
                this.getzuzhi()
                this.$refs[xzData].resetFields()
              }

            })
          }
        } else {
          return false
        }
      })
    },
    //删除
    examine(){
      if (Object.keys(this.DataList).length == 0) {
        this.$alert('请选择需要删除的数据', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确认要删除此数据吗?', '提示', {
        closeOnClickModal: false,
        type: 'warning'
      }).then( () =>{
        eitdRegion({dptId:this.DataList.dptId}).then(res=>{
          if(res.success !== '1'){
            this.$message({
              type: 'success',
              message: '删除失败'
            })
            return
          }else{
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            // this.dataitemList()
            this.refreshList()
            this.close()
          }

        })
      })


    },
    //双击查看
    rowdbClick(row){
      this.addText='查看区域中心'
      this.addShowA=true
      this.see=false
      this.xzData = row
      this.disabled=true
      this.disabledA=true
    },
    // 查看区域中心所有用户弹出框
    CK(row){
      this.itemData = []
      this.addText='查看区域中心所有用户'
      this.addShowB=true
      regionListA({dptId:row.dptId}).then(res=>{
        this.itemData = res.data.FTKJWLHYPT
      })
    },
    //导出
    handleDownload() {
      var timestamp = (new Date()).valueOf()
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = [
          '区域中心代码', '区域中心名称', '上级机构', '用户人数',]
        const filterVal = [
          'tayNo', 'tayIeflag', 'tayPortCd', 'tayXdltfag',]
        const list = this.DetailedData
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: timestamp,
          autoWidth: true
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          return v[j]
        })
      )
    },
    //获取当前行数据
    rowClick(row){
      this.DataList = row
    },
    // 关闭弹出框
    close(){
      this.addShowA=false
      this.addShowB=false
    }

  }
}
</script>

<style  lang="scss" scoped>
.el-select {
  width: 100%;
}
.app-container {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  .table {
    flex: 1;
    position: relative;
    overflow: hidden;
    .inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .el-pagination {
      height: 4rem;
      flex: 0 0 auto;
      margin: 1rem 0;
    }
  }
}
</style>
